<template>
      <div class="qrcodeDiv">
        <!-- 生产二维码 -->
          <img class="canvas2Img" :src="canvasUrl" alt="">
          <canvas v-show="isshow" class="canvasIos" id="canvasIos"></canvas>
          <p class="qrP">IOS</p>
      </div>
</template>
<script>
  import QRCode from 'qrcode'
  export default{
        name:'qrcode',
        props: {
          qrcodeUrl:String
        },
        data(){
            return {
              isshow:true,
              canvasUrl:'',
              // qrcodeUrl:"https://www.baidu.com/"
            }
        },
      components: {
        QRCode: QRCode
      },
      mounted(){
        this.useqrcode();
        this.canvasToImg()
      },
      methods: {
        useqrcode(){
          let canvasIos = document.getElementById('canvasIos')
          QRCode.toCanvas(canvasIos, this.qrcodeUrl)
        },
        canvasToImg(){
          let canvas2Img = document.getElementById("canvasIos");
          let image = new Image();
          image.src = canvasIos.toDataURL("image/png");
          this.isshow=!this.isshow
          this.canvasUrl=image.src
        }
      }
    }
</script>
<style scoped>
.qrcodeDiv .canvas{
    width: 200px!important;
    height: 200px!important;
}
.qrcodeDiv .canvas2Img{
  width: 200px;
  height: 200px;
}
.qrcodeDiv .qrP{
    margin-bottom: 2vh;
    text-align: center;
}

</style>
